<template>
  <Transition :name="animate">
    <div class="pui-dialog outer" v-if="modelValue" :style="{ zIndex: zIndex }">
      <div :class="['pui-dialog_content', 'inner']" :style="{ width: width }">
        <div class="pui-dialog_header" v-if="!isHeader && header">
          <div class="pui-dialog_title">{{ title }}</div>
          <pui-icon name="close" size="large" @click="handleCancel"></pui-icon>
        </div>
        <div class="pui-dialog_header" v-if="isHeader">
          <slot name="header"></slot>
          <pui-icon name="close" size="large" @click="handleCancel"></pui-icon>
        </div>
        <div class="pui-dialog_container">
          <slot name="content"></slot>
        </div>
        <div class="pui-dialog_footer" v-if="!isFooter && footer">
          <pui-button @click="handleCancel">{{ cancelText }}</pui-button>
          <pui-button type="primary" @click="handleSubmit">{{ submitText }}</pui-button>
        </div>
        <div class="pui-dialog_footer" v-if="isFooter">
          <slot name="footer"></slot>
        </div>
      </div>
      <div class="pui-dialog_mask" v-if="mask" @click="maskClick && handleCancel()"></div>
    </div>
  </Transition>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  name: 'pui-dialog',
});
</script>

<script setup lang="ts">
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  mask: true,
  maskClick: true,
  isFooter: false,
  isHeader: false,
  header: true,
  footer: true,
  title: 'Message Box',
  animate: 'fade',
  submitText: '确定',
  cancelText: '取消',
  width: '',
  zIndex: '',
});

const animateName = ref('');

const emits = defineEmits<{
  'update:modelValue': [val: boolean];
  onCancel: [val: boolean];
  onSubmit: [val: boolean];
}>();

watch(
  () => props.animate,
  (v1, v2) => {
    animateName.value = props.animate === 'fade' ? '' : '';
  }
);

const handleCancel = () => {
  emits('update:modelValue', false);
  emits('onCancel', true);
};

const handleSubmit = () => {
  emits('update:modelValue', false);
  emits('onSubmit', true);
};
</script>
